<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>历史业绩查询</title>
    <jsp:include page="../../include/header.jsp"></jsp:include>
    <style type="text/css">
			table th{
				text-align: center;
	            white-space: nowrap;
	        }
			table td{
				text-align: center;
	            white-space: nowrap;
	        }
		    table{
		         empty-cells:show; 
		         border-collapse: collapse;
		         margin:0 auto;
		    }
 			.col-lg-9 {
			    width: 100%;
			}
			.pcc{
				width: 110px;
				height: 34px;
			}
			input{
				text-indent:10px;
				width: 80%;
				border-radius:5px;
			}
			.search-btnn {
			    float: left;
			     width: 80px; 
			    margin-left: 5px;
			}
		</style>
</head>
<body>
<div id="wrapper" class="row">
		<div class="col-lg-12">
			<h1 class="page-header">历史业绩查询</h1>
		</div>
	<!-- 搜索框 -->
		<div class="title-top col-lg-12">
			<label class="search-label">会员卡号：</label><input type="text" id="sCard" value="" placeholder="请输入会员卡号" class="form-control search-input width200" maxlength="21">
			<label class="search-label">会员手机号：</label><input type="text" id="sPhone" value="" placeholder="请输入会员手机号" class="form-control search-input width200" maxlength="21">
			<label class="search-label">会员姓名：</label><input type="text" id="sName" value="" placeholder="请输入会员姓名" class="form-control search-input width200" maxlength="21">
			<div class="clearfix"></div>
			<label class="search-label">开始日期：</label><input type="text" id="sBeginDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
			<label class="search-label">结束日期：</label><input type="text" id="sEndDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
			<button class="btn btn-success search-btn" onclick="query();">确定</button>
			<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			<shiro:hasPermission name="bus:user:doExcel">
					<button onclick="doExcel();"  class="btn btn-success pull-right">导出</button>
			</shiro:hasPermission>
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12">
			<div class="col-lg-12 title-top">
				<div class="text-muted single-line-text pull-left">共 <font color="#428bca" id="dataCount">0</font> 条记录</div>
			</div>
			<div class="table-responsive panel panel-default" >
				<table id="dataTable" class="table table-hover table-bordered" style="overflow:scroll;">
		            <thead>
		               	<tr>
		               		<th width="50px;">会员ID</th>
		               		<th width="160px;">日期</th>
							<th width="150px;">会员卡号</th>
							<th width="120px;">会员手机</th>
							<th width="120px;">会员姓名</th>
							<th width="80px;">新增人数</th>
							<th width="100px;">新增交易量</th>
							<th width="140px;">新增交易额</th>
							<th width="80px;">复投人数</th>
							<th width="100px;">复投交易量</th>
							<th width="140px;">复投交易额</th>
							<th width="160px;">总考核金额</th>
						</tr>
		            </thead>
		            <tbody id="dataList"></tbody>
		        </table>
			</div>
	        	<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
		</div>
</div>
<jsp:include page="../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script src="${BASE_PATH}/static/js/PCASClass.js" type="text/javascript"></script>
<script type="text/html" id="dataTpl">
		{{each list as item}}
				 <tr id="item{{item.id}}" data-id="{{item.id}}">
					<td>{{item.id}}</td>
					<td>{{item.createDate }}</td>
				 	<td>
						{{item.card }}
					</td>
					<td>{{item.phone}}</td>
					<td>{{item.name}}</td>
					<td>
						{{if item.userNum}}<a href="javascript:showTeam('{{item.id}}');"><font color="#40a9ff" id="dataCount">{{item.userNum}}</font></a>{{/if}}
						{{if !item.userNum}}0{{/if}}
						
					</td>
					<td>
						{{if item.ficum}}{{item.ficum}}{{/if}}
						{{if !item.ficum}}0{{/if}}
					</td>
					<td>
						{{if item.finum}}{{item.finum}}{{/if}}
						{{if !item.finum}}0.00{{/if}}
					</td>				
					<td>
						{{if item.seuserNum}}{{item.seuserNum }}{{/if}}
						{{if !item.seuserNum}}0{{/if}}
					</td>
                    <td>
						{{if item.secum}}{{item.secum}}{{/if}}
						{{if !item.secum}}0{{/if}}
					</td>
					<td>
						{{if item.senum}}{{item.senum}}{{/if}}
						{{if !item.senum}}0.00{{/if}}
					</td>
					
					<td>
						{{if item.allCount}}{{item.allCount }}{{/if}}
						{{if !item.allCount}}0.00{{/if}}
					</td>
				</tr>
		{{/each}}
</script>
<script type="text/javascript">
var dataPaginator;
var DateId='${id}';
$(query);
function query(){
	var pageSize=$("#pageSize").val();
	 var card=$("#sCard").val(),sName=$("#sName").val(),sPhone=$("#sPhone").val(),sBeginDate=$("#sBeginDate").val(),sEndDate=$("#sEndDate").val();
	 var params = {
		pageSize:pageSize,
		card:card,
		name:sName,
		phone:sPhone,
		sBeginDate:sBeginDate,
		sEndDate:sEndDate
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/user/queryHistoryAmount",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
// 		alert(JSON.stringify(result.object.list[0]));
	});
}


//重置
function reset(){
	$("#sCard").val("");$("#sName").val("");$("#sPhone").val("");$("#sBeginDate").val("");$("#sEndDate").val("");
}


function showTeam(id){
	window.location.href="${BASE_PATH}/bus/user/showTeam?id="+id;
}

function doExcel(){
	 var card=$("#sCard").val(),sBeginDate=$("#sBeginDate").val(),sEndDate=$("#sEndDate").val();
		window.location.href="${BASE_PATH}/bus/user/doExcelHistory?card="+card+"&sBeginDate="+sBeginDate+"&sEndDate="+sEndDate;
}
 
$("#sBeginDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    pickerPosition:'bottom-right',
    autoclose:true,
}).on("click",function(){
	var d2=new Date();
	var d=$("#sEndDate").val();
	if(d==""){
		 $("#sBeginDate").datetimepicker("setEndDate",d2);
	}else{
		var d1=new Date(d); 
		d1.setDate(d1.getDate()-1);
		if(d1>d2){
	  	 	 $("#sBeginDate").datetimepicker("setEndDate",d2);
		}else{
			 $("#sBeginDate").datetimepicker("setEndDate",d1);
		}
	}
});
$("#sEndDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    autoclose:true,
	}).on("click",function(){
		var d=$("#sBeginDate").val();
		var d1=new Date(d); 
		d1.setDate(d1.getDate()+1); 
		$("#sEndDate").datetimepicker("setStartDate",d1);
	});
 $(document).on("click","#sEndDate",function(){
    	$('#sEndDate').datetimepicker('show');
    });
$(document).on("click","#sBeginDate",function(){
	$('#sBeginDate').datetimepicker('show');
});
</script>
</body>
</html>